<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>tab栏切换</title>
		<style>
			* {
				margin: 0;
				padding: 0;
				box-sizing: border-box;
			}
			ul,
			li {
				list-style: none;
			}
			.tab {
				width: 400px;
				margin: 100px auto;
			}
			.tab-list {
				display: flex;
				height: 40px;
				border: 1px solid #000;
				background-color: #f1f1f1;
			}
			.tab-list li {
				flex: 1;
				height: 40px;
				line-height: 40px;
				text-align: center;
				padding: 0 20px;
				cursor: pointer;
			}
			.tab-list .current {
				background-color: #c81623;
				color: #fff;
			}

			.tab-con .item {
				display: none;
			}
		</style>
	</head>
	<body>
		<!--! 2结合定时器完成tab栏的自动切换，当鼠标移入移除定时器的效果 -->

		<div class="tab">
			<ul class="tab-list">
				<li class="current">tab1</li>
				<li>tab2</li>
				<li>tab3</li>
				<li>tab4</li>
				<li>tab5</li>
			</ul>
			<div class="tab-con">
				<div class="item" style="display: block">商品1</div>
				<div class="item">商品2</div>
				<div class="item">商品3</div>
				<div class="item">商品4</div>
				<div class="item">商品5</div>
			</div>
		</div>
		<script src="./jquery.min.js"></script>
		<script>
			$(function () {
        //定义定时器函数自动切换tab栏
				let index = 0
				let flag = true
				function timer() {
					if (flag) {
						index++
						if (index == $('.tab-list li').length) {
							index = 0
						}
						$('.tab-list li').eq(index).addClass('current').siblings().removeClass('current')
						$('.tab-con .item').eq(index).show().siblings().hide()
					}
				}
				setInterval(timer, 2000)

				$('.tab-list li').mouseenter(function () {
					flag = false
					clearInterval(timer)
					let i = $(this).index()
					$(this).addClass('current').siblings().removeClass('current')
					$('.tab-con .item').eq(i).show().siblings().hide()
				})

				$('.tab').on({
					mouseenter: function () {
						flag = false
						clearInterval(timer)
					},
					mouseleave: function () {
						flag = true
					}
				})
			})
		</script>
	</body>
</html>
